<template>
  <div class="order-logistics">
    <unify-header></unify-header>
    <div class="container" ref="container">
      <div class="bread-crumbs">
        <ul class="wrapper ">
          <li><a href="/center/works.html">个人中心</a></li>
          <li><a href="/center/order.html">订单管理</a></li>
          <li class="current"><span>查看物流</span></li>
        </ul>
      </div>
      <div>
        <h4 class="headings">
          <div class="wrapper">查看物流</div>
        </h4>
        <p class="no-express" v-if="orderInfo.length && orderInfo[0].status < 10">
          您的订单已付款成功，我们将进行生产，在<em>7个工作日</em>的生产周期后，<br>我们会将您的印品快递至您的手中。
        </p>
        <div class="logistics-info" v-if="orderInfo.length && orderInfo[0].status >= 10 && logistics.status === 1">
          <div class="wrapper">
            <span class="row">物流信息：</span>
            <span class="row">运单号码：{{logistics.data.code}}</span>
            <span class="row">物流公司：{{logistics.data.companyName}}</span>
            <dl class="logistics-details" v-if="logistics.data.trace && logistics.data.trace.length">
              <dt>{{orderInfo[0].status > 10 ? '已签收' : '运输中'}}</dt>
              <dd v-for="item in logistics.data.trace[0].info">
                <span class="date">{{item.accept_time[0]}}</span>
                <span
                  class="weeks">{{['星期一','星期二','星期三','星期四','星期五','星期六','星期日'][item.accept_time[2].getDay()-1]}}</span>
                <span class="time">{{item.accept_time[1]}}</span>
                <span>{{item.remark}}</span>
              </dd>
            </dl>
          </div>
        </div>
        <div v-for="item in orderInfo" v-if="orderInfo.length && orderInfo[0].status >= 10" class="wrapper">
          <div class="consignee">
            <label>收货人信息：</label>
            <span>{{item.consigneeName}}</span>
            <p>{{item.consigneeDetailAddress}}</p>
          </div>
        </div>
      </div>
    </div>
    <unify-footer></unify-footer>
  </div>
</template>

<script type="text/ecmascript-6">
  import UnifyHeader from '../../components/header/header.vue'
  import UnifyFooter from '../../components/footer/footer.vue'
  import Filter from '@/filter.js'
  import Api from '@/api.js'
  import * as OrderApi from '@/api/order'

  export default {
    data: function () {
      return {
        orderInfo: [],
        logistics: {}
      }
    },
    methods: {
      _getExpressInfo: function (code) {
        OrderApi.expressOrder(code).then(res => {
          if (res.status === 1) {
            let data = res.data
            if (data.trace && data.trace.length && data.trace[0].info && data.trace[0].info.length) {
              data.trace[0].info.forEach(item => {
                let time = item['accept_time'].split(' ')
                time.push(new Date(time[0]))
                item['accept_time'] = time
              })
            }
            this.logistics = Object.assign({}, res, {})
            console.log(this.logistics)
          }
        })
      }
    },
    components: {
      UnifyHeader, UnifyFooter
    },
    watch: {},
    mounted: function () {
      this.setMinHeight(this.$refs.container, document.body.scrollHeight - 50 - 132 - 92 - 14)
      let dbId = this.getQueryString('id')
      Api.Order.queryOrder({
        orderDbId: dbId
      }).then((result) => {
        let list = result.data
        list.forEach(order => {
          let goodsValue = 0
          order.cars.forEach(goods => {
            goodsValue += goods.total
          })
          order.goodsValue = goodsValue
        })
        this.orderInfo = list
        if (this.orderInfo[0].status >= 1) {
          this._getExpressInfo(this.orderInfo[0].code)
        }
      })
    },
    created: function () {

    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/sass">

  .order-logistics {
    .wrapper {
      width: 1152px;
      margin: 0 auto;
      overflow: hidden;
    }
    .container {
      padding: 14px 0 92px;
      background: #f9f9f9;
    }
    .bread-crumbs {
      ul {
        overflow: hidden;
      }
      li {
        float: left;
        margin-right: 10px;
        &:after {
          position: relative;
          top: -1px;
          display: inline-block;
          content: '>';
          color: #999;
          margin-left: 10px;
          line-height: 40px;
        }
        a {
          color: #999;
        }
      }
      .current {
        color: #a00912;
        &:after {
          content: '';
        }
      }
      a, span {
        line-height: 40px;
      }
    }

    .flow-chart {
      .flow-prompt {
        margin-top: 40px;
        line-height: 58px;
        background: #eee;
        border: 1px solid #d2d2d2;
        border-left: 0;
        border-right: 0;
        .prompt {
          font-size: 16px;
          font-weight: 500;
          em {
            font-style: normal;
            color: #990000;
          }
        }
        .pay-btn {
          display: inline-block;
          margin-left: 16px;
          padding: 0 1em;
          line-height: 32px;
          font-size: 12px;
          color: #fff;
          background: #990000;
          border-radius: 5px;
        }
      }
    }
    .no-express {
      padding-top: 160px;
      font-size: 22px;
      text-align: center;
      em {
        font-style: normal;
        color: #990000;
      }
    }
    .logistics-info {
      padding-top: 20px;
      .row {
        display: block;
      }
      .logistics-details {
        margin-top: 30px;
        background: #f3f3f3;
        dt {
          line-height: 40px;
          padding-left: 20px;
          border-bottom: 1px solid #e7e7e7;
        }
        dd {
          padding-left: 20px;
          line-height: 38px;
          .date {
            margin-right: 16px;
          }
          .weeks {
            font-weight: 500;
            margin-right: 10px;
          }
          .time {
            margin-right: 16px;
          }
        }
      }
    }
    .headings {
      margin-top: 20px;
      line-height: 36px;
      border: 1px solid #d2d2d2;
      border-left: 0;
      border-right: 0;
      background: #eee;
      font-size: 16px;
    }
    .order-info, .consignee, .invoice, .remark, .pay-info {
      color: #666;
      font-size: 16px;
      padding: 25px 0;
    }
    .consignee {
      padding-top: 20px;
      p {
        line-height: 1.8;
      }
    }
    .pay-info {
      border: 0;
    }
    h5 {
      font-size: 16px;
      line-height: 32px;
    }
    .row {
      font-size: 16px;
      line-height: 36px;
      color: #666;
      label {
        font-weight: 400;
      }
      span {
        font-weight: 200;
      }
    }
  }

</style>
